<template>
    <div class="gray-card-container zs-space-bottom" :class="{'blue-bg': isBlueCard}">
        <div class="gray-card-header" v-if="title">{{ title }}</div>
        <div class="zs-layout-flex-row zs-layout-justify-around zs-layout-items-start">
            <div class="zs-layout-flex-col zs-layout-items-center" v-for="(item, index) in props.list" :key="index">
                <div class="gray-card-title"
                    :class="{ 'zs-text-red': item.color == 1, 'zs-text-orange': item.color == 2, 'zs-text-green': item.color == 3 }">
                    <span>{{ item.thousand ? toThousands(item.value) : item.value }}</span><span class="zs-text-sm">{{ item.unit == '-' ? "" : item.unit }}</span>
                </div>
                <div class="zs-layout-flex-row">
                    <div class="zs-text-gray-dark">{{ item.label }}</div>
                    <div :class="{'zs-text-red': item.labelDesColor == 1, 'zs-text-orange': item.labelDesColor == 2, 'zs-text-green': item.labelDesColor == 3, 'zs-text-gray-dark': item.labelDesColor == 0 || !item.labelDesColor}">{{ item.labelDes }}</div>
                </div>
                <div class="zs-text-gray zs-text-gray zs-text-sm zs-space-top-sm" v-if="item.des">{{ item.des }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { toThousands } from '@/utils/number-util'

const props = defineProps({
    isBlueCard: {
        type: Boolean,
        required: false,
        default: false
    },
    title: {
        type: String,
        required: false,
        default: ''
    },
    list: {
        type: Array,
        required: false,
        default: () => [{ label: '预算', value: '7,010', thousand: true, unit: '%', color: '1', des: '说明文字' }, { label: '实际', value: '7,790', unit: '', color: '' }, { label: '完成率', value: '112', unit: '%', color: '' }]
    }
})
</script>

<style scoped lang="scss">

.gray-card-container {
    padding: 12px 0;
    background: #f6f7fa;
    border-radius: 4px;
}
.blue-bg {
    background: #EEF4FE;
}
.gray-card-header {
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #333333;
    line-height: 24px;

    margin: 0 16px 12px 16px;
    border-bottom: 1px solid #DADADD;
    padding-bottom: 10px;
}

.gray-card-title {
    font-size: 20px;
    font-family: DIN Alternate, DIN Alternate-Bold;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
}
</style>
